import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, message ,Button,Pagination} from 'antd';
import './Album.css';
var NavLink=require('../modules/NavLink');
var Header = require('../modules/Header');
var Footer = require('../modules/Footer');
var IndexLink = require('react-router').IndexLink;

var IndexRoute = require('react-router').IndexRoute;

class App extends React.Component {
  constructor(props){
    super(props);
  }
  fenlie(e){
    var popup1=document.getElementById('popup1');
    var popup2=document.getElementById('popup2');
    var popup3=document.getElementById('popup3');
    var Atarget=e.target.getAttribute('data-gid');
    switch(Atarget){
      case "3":
      popup1.style.display="block";
      popup2.style.display="none";
      popup3.style.display="none";
      break;
      case "4":
      popup2.style.display="block";
      popup1.style.display="none";
      popup3.style.display="none";
      break;
      case "6":
      popup3.style.display="block";
      popup2.style.display="none";
      popup1.style.display="none";
      break;
      default:
      popup1.style.display="none";
      popup2.style.display="none";
      popup3.style.display="none";
    }  
  }
  render(){
    var letterStyle = {
      clear:'both'
    };
    return(
        <div>

          <Header/>
         
          <div className="box" style={letterStyle}></div>
        <div className="main" onClick={this.fenlie}>
          <div className="mod_tag">       
            <div className="tag_list">
                  <h3 className="tag_tit">语种</h3>
                  <a href="javascript:;" className="tag_item tag_item--select">全部</a>
                  <a href="javascript:;" className="tag_item" >国语</a>
                  <a href="javascript:;" className="tag_item" >英语</a>   
                  <a href="javascript:;" className="tag_item" >韩语</a>
                  <a href="javascript:;" className="tag_item" >日语</a>
                  <a href="javascript:;" className="tag_item" >法语</a>
                  <a href="javascript:;" className="tag_item" >西班牙语</a>
            </div>
            <div className="tag_list">
                  <h3 className="tag_tit">流派</h3>
                  <a href="javascript:;" className="tag_item tag_item--select" data-id="genre|0">全部</a>
                  <a href="javascript:;" className="tag_item" data-id="genre|1">流行</a>
                  <a href="javascript:;" className="tag_item" data-id="genre|2">古典</a>
                  <a href="javascript:;" className="tag_item" data-id="genre|3">爵士</a>
                  <a href="javascript:;" className="tag_item" data-id="genre|36">摇滚</a>
                  <a href="javascript:;" className="tag_item" data-id="genre|22">电子</a>
                  <a href="javascript:;" className="tag_item" data-id="genre|27">拉丁</a>
                  <a href="javascript:;" className="tag_item" data-id="genre|21">轻音乐</a>    
                  <a href="javascript:;" className="tag_item" data-id="genre|39">世界音乐</a> 
                  <a href="javascript:;" className="tag_item" data-id="genre|34">嘻哈</a>    
                  <a href="javascript:;" className="tag_item" data-id="genre|37">原声</a>   
                  <a href="javascript:;" className="tag_item" data-id="genre|19">乡村</a>   
                  <a href="javascript:;" className="tag_item" data-id="genre|20">舞曲</a>   
                  <a href="javascript:;" className="tag_item" data-id="genre|33">R&amp;B</a>
                  <a href="javascript:;" className="tag_item" data-id="genre|23">民谣</a>
                  <a href="javascript:;" className="tag_item" data-id="genre|28">金属</a>
            </div>
            <div className="tag_list">
                  <h3 className="tag_tit">价格</h3>
                  <a href="javascript:;" className="tag_item tag_item--select" data-id="pay|0">全部</a>
                  <a href="javascript:;" className="tag_item" data-id="pay|1">免费</a>
                  <a href="javascript:;" className="tag_item" data-id="pay|2">付费</a>
            </div>
            <div className="tag_list">
                  <h3 className="tag_tit">筛选</h3>
                  <a href="javascript:;" onClick={this.fenlie} className="tag_item js_sub_tab" data-title="类别" data-key="type" data-gid="3">类别</a>
                  <a href="javascript:;" onClick={this.fenlie} className="tag_item js_sub_tab" data-title="年代" data-key="year" data-gid="4">年代</a>
                  <a href="javascript:;" onClick={this.fenlie} className="tag_item js_sub_tab" data-title="唱片公司" data-key="company" data-gid="6">唱片公司</a>
            </div>
              <div className="popup_tag" id="popup1">
                  <div className="tag_list">
                      <a href="javascript:;" className="tag_item tag_item--select" data-id="type|-1">全部</a>
                      <a href="javascript:;" className="tag_item" data-id="type|0">专辑</a>
                      <a href="javascript:;" className="tag_item" data-id="type|11">EP</a>
                      <a href="javascript:;" className="tag_item" data-id="type|10">Single</a>
                      <a href="javascript:;" className="tag_item" data-id="type|1">演唱会</a>
                      <a href="javascript:;" className="tag_item" data-id="type|3">动漫</a>
                      <a href="javascript:;" className="tag_item" data-id="type|4">游戏</a>
                  </div>
              </div>
              <div className="popup_tag"  id="popup2">
                  <div className="tag_list">
                      <a href="javascript:;" className="tag_item tag_item--select">全部</a>
                      <a href="javascript:;" className="tag_item" data-id="year|14">2017</a>
                      <a href="javascript:;" className="tag_item" data-id="year|7">2016</a>
                      <a href="javascript:;" className="tag_item" data-id="year|8">2015</a>
                      <a href="javascript:;" className="tag_item" data-id="year|9">2014</a>
                      <a href="javascript:;" className="tag_item" data-id="year|15">2013</a>
                      <a href="javascript:;" className="tag_item" data-id="year|16">2012</a>
                      <a href="javascript:;" className="tag_item" data-id="year|2">一零年代</a>
                      <a href="javascript:;" className="tag_item" data-id="year|3">零零年代</a>
                      <a href="javascript:;" className="tag_item" data-id="year|4">九十年代</a>
                      <a href="javascript:;" className="tag_item" data-id="year|5">八十年代</a>
                      <a href="javascript:;" className="tag_item" data-id="year|6">七十年代</a>
                      <a href="javascript:;" className="tag_item" data-id="year|13">六十年代</a>
                  </div>
              </div>
              <div className="popup_tag" id="popup3">
                <div className="tag_list">
                    <a href="javascript:;" className="tag_item tag_item--select">全部</a>
                    <a href="javascript:;" className="tag_item" data-id="company|3">华纳唱片</a>
                    <a href="javascript:;" className="tag_item" data-id="company|5">索尼音乐</a>
                    <a href="javascript:;" className="tag_item" data-id="company|35">环球唱片</a>
                    <a href="javascript:;" className="tag_item" data-id="company|8482">麦爱音乐</a>
                    <a href="javascript:;" className="tag_item" data-id="company|2317">杰威尔音乐</a>
                    <a href="javascript:;" className="tag_item" data-id="company|2">英皇唱片</a>
                    <a href="javascript:;" className="tag_item" data-id="company|8416">三胜文化</a>
                    <a href="javascript:;" className="tag_item" data-id="company|10">福茂唱片</a>
                    <a href="javascript:;" className="tag_item" data-id="company|373">金牌大风</a>
                    <a href="javascript:;" className="tag_item" data-id="company|1021">YG</a>
                    <a href="javascript:;" className="tag_item" data-id="company|1360">少城时代</a>
                    <a href="javascript:;" className="tag_item" data-id="company|20">华谊兄弟</a>
                    <a href="javascript:;" className="tag_item" data-id="company|9628">华纳PLG</a>
                    <a href="javascript:;" className="tag_item" data-id="company|6958">Cube</a>
                    <a href="javascript:;" className="tag_item" data-id="company|1390">Loen</a>
                    <a href="javascript:;" className="tag_item" data-id="company|1065">当然娱乐</a>
                    <a href="javascript:;" className="tag_item" data-id="company|7913">梦响强音</a>
                    <a href="javascript:;" className="tag_item" data-id="company|1020">乐华圆娱</a>
                    <a href="javascript:;" className="tag_item" data-id="company|2597">梦响当然</a>
                    <a href="javascript:;" className="tag_item" data-id="company|2067">林暐哲音乐</a>
                    <a href="javascript:;" className="tag_item" data-id="company|740">和平之月</a>
                    <a href="javascript:;" className="tag_item" data-id="company|16800">NHN BUGS</a>
                    <a href="javascript:;" className="tag_item" data-id="company|1431">Genie Music</a>   
                </div>
            </div>
          </div>
     
            <div className="mod_part_detail">
              <div className="part_detail__hd">
                  <h2 className="part_detail__tit">全部专辑</h2>
                  <div className="part_switch js_sort" aria-label="排列方式">
                      <IndexLink to="/Album" activeClassName="active"  className="part_switch__item part_switch__item--left part_switch__item--select">最热</IndexLink>
                      <NavLink to="/Album/New"  className="part_switch__item part_switch__item--right" title="最新">最新</NavLink>
                  </div>
              </div>
                 {this.props.children}
            </div>
           
            <Pagination defaultCurrent={6} total={500} />
                


        </div>
        <Footer/>
      </div>
      )
  }
}

module.exports=App;
      




